`<template>
  <div>
    <div class="returntop" @click="handleReturnTop" ref="returnTop" v-show="data.returnTopShow">
      <img src="../../public/images/home/up.png" alt />
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, } from "vue";
const data = reactive({
  returnTopShow: false
});
const handleReturnTop = () => {
  animatewin(window,0)
};
onMounted(() => {
  window.addEventListener("scroll", function() {
    if (window.pageYOffset >= 1000) {
      data.returnTopShow = true;
    } else {
      data.returnTopShow = false;
    }
  });
});

function animatewin(obj, end, callback) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    let step = (end - obj.pageYOffset) / 10;
    step = step > 0 ? Math.ceil(step) : Math.floor(step);
    if (obj.pageYOffset == end) {
      clearInterval(obj.timer);
      if (callback) {
        callback();
      }
    } else {
      obj.scroll(0, obj.pageYOffset + step);
    }
  }, 20);
  obj.addEventListener("wheel",function(){
    clearInterval(obj.timer)
  })
}
</script>

<style scoped>
.returntop {
  width: 3rem;
  position: fixed;
  left: 90%;
  bottom: 10%;
  border: 1px solid gray;
  padding: 0.5rem;
  border-radius: 0.5rem;
  box-sizing: border-box;
}
.returntop img {
  width: 100%;
}
</style>